<template>
	<view class="my_container">
		<view class="top_content">
			<!-- 登录视图 -->
			<view class="login_view" v-if="loginFlag">
				<view class="user_info">
					<view class="user_picture">
						<img class="user_pic_img" :src="baseUrl + userInfo.userPicture" alt="用户头像">
					</view>
					<view class="user_name">
						{{ userInfo.userName }}
					</view>
				</view>
			</view>
			<!-- 未登录视图 -->
			<view class="not_login_view" v-else>
				<button class="login_btn" 
						size="default" 
						plain 
						@click="loginHandle()"
						>
					一键登录
				</button>
			</view>
		</view>
		<!-- 订单盒子 -->
		<view class="order_box">
			<view class="order_box_movetop">
				<!-- 订单标题 -->
				<view class="order_title">
					<view class="order_title_text">
						我的订单
					</view>
					<view class="order_title_goto" @click="gotoOrderPage(100)">
						<view class="get_all_order">查看全部订单</view>
						<view class=""><img class="order_rightBtn" src="../../static/order/right.png" alt="gotoAllOrder" srcset=""></view>
					</view>
				</view>
				<!-- 订单状态项 -->
				<view class="order_state_box">
					<view class="order_state_item" 
						v-for="(item, index) of orderElementsD" 
						:key="index" 
						@click="gotoOrderPage(index)"
						>
						<uni-badge class="uni-badge-left-margin" :text="orderBadge[index]" absolute="rightTop">
							<view class="order_icon">
								<img class="order_icon_img" :src="'../../static/order/' + item.icon" alt="" srcset="">
							</view>
						</uni-badge>
						<view class="order_text">
							{{ item.text }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 其他功能盒子 -->
		<view class="order_func">
			<view class="func_item" 
				v-for="(item, index) of elseFuncElementsD" 
				:key="index"
				:class="{'lastFuncItem': index == 4}"
				@click="orderFucHandle(item)"
			>
				<view class="func_item_pic">
					<img class="func_item_pic_img" :src="'../../static/elseFunc/' + item.icon" alt="" srcset="">
				</view>
				<view class="func_item_text">
					{{ item.text }}
				</view>
			</view>
		</view>
		<!--  -->
	</view>
</template>

<script setup>
import { ref, onMounted } from "vue"	
import { onShow } from '@dcloudio/uni-app';

// 徽标数据 【0:待付款，1：待发货，2：待收货， 3：售后，4：完成, 5:已取消】
let orderBadge = ref([0, 0, 0, 0, 0, 0]);

onShow(async()=>{
	// 更新购物车徽标
	uni.$loadCarBadge();
	getOrderData();
	await uni.$checkLogin();
	
	checkLoginStatus()
})

// 用户信息
let userInfo = ref({});
// 登录标识
let loginFlag = ref(false);
// 图片基础路径
let baseUrl = uni.$baseUrl
// 订单元素数据
let orderElementsD = ref([
	{
		text: "待付款",
		icon: "待付款.png"
	},
	{
		text: "待发货",
		icon: "待发货.png"
	},
	{
		text: "待收货",
		icon: "待收货.png"
	},
	{
		text: "售后",
		icon: "售后.png"
	}
])

// 其他功能元素数据
let elseFuncElementsD = ref([
	{
		text: "收货地址",
		icon: "收货地址.png"
	},
	{
		text: "优惠券",
		icon: "优惠卷.png"
	},
	{
		text: "收藏",
		icon: "收藏.png"
	},
	{
		text: "客服",
		icon: "客服.png"
	},
	{
		text: "通用设置",
		icon: "设置.png"
	}
])

// 页面加载获取检查登录状态
onMounted(()=>{
})

// 一键登录处理器
function loginHandle(){
	uni.login({
		provider: 'weixin',
		success(login) {
			// 调用登录方法， 获取临时码code
			loginExec(login.code);
		}
	});
}

// 检查登录状态
function checkLoginStatus(){
	if(!uni.getStorageSync("login")){
		loginFlag.value = false;
		orderBadge.value = [0, 0, 0, 0, 0, 0];
	}else{
		userInfo.value = JSON.parse(uni.getStorageSync("userInfo"));
		loginFlag.value = true;
		getOrderData();
	}
}

// 其他盒子点击功能分发器
function orderFucHandle(item){
	if(item.text == "收货地址"){
		uni.chooseAddress({
			success(res) {
				// 本地存储
				uni.setStorageSync("address", JSON.stringify(res));
			},
			fail(err){
				uni.showToast({
					title: '网络异常',
					icon: "none"
				}); 
			}
		})
	}else if(item.text == "优惠券"){
		uni.navigateTo({
			url:"/subPkg2/coupon/coupon"
		})
	}else if(item.text == "收藏"){
		uni.navigateTo({
			url:"/subPkg2/collect/collect"
		})
	}else if(item.text == "客服"){
		uni.showToast({
			title: "敬请期待",
			icon: "none"
		})
	}
}


// 获取订单数据并显示各订单状态徽标
async function getOrderData(){
	if(!loginFlag.value){
		return 1;
	}
	
	// 获取徽标数据
	const res = await uni.$http.get(`/orderInfos/getOrderStatusCount/${userInfo.value.userId}`);
	for(let item in res.data.data){
		orderBadge.value[item] = res.data.data[item]
	}
}


// 待标识的跳转到订单页面
function gotoOrderPage(target){
	uni.navigateTo({
		url: `/subPkg2/order/order?state=${target}`
	})
}

// 一键登录执行器
async function loginExec(tempCode){
	// 调用后端登录接口，换取用户信息和token
	const res = await uni.$http.post(`/userInfos/login/${tempCode}`);
	// // 处理后端返回的用户信息，解析为对象
	// const userInfoStr = res.data.data.slice(10, -1); // 移除 "UserInfo(" 和 ")"
	// console.log(userInfoStr);
	// const entries = userInfoStr.split(', ').map((entry) => {
	// 	const [key, value] = entry.split('=');
	// 	return [key.trim(), value.trim()];
	// });
	
	// // 将处理好的数据进行存储
	// userInfo.value = Object.fromEntries(entries)
	userInfo.value = res.data.data;
	
	// 存储userInfo 和token到本地存储中， 更换登录状态标识
	uni.setStorageSync("userInfo", JSON.stringify(userInfo.value));
	uni.setStorageSync("token", res.header.Authorization);
	uni.setStorageSync("login", true);
	
	loginFlag.value = true;
	getOrderData();
}
</script>

<style lang="scss">
	
.login_btn{
	width: 30vw;
	position: relative;
	top: 100rpx;
	color: #54ccff;
	font-size: 15px;
	padding: 3px 0px;
}
	
.top_content{
	background: linear-gradient(to bottom right, #f2eff6, #f2edf5, #d7e8f7, #e5e0f4, #f4f2f8);
	height: 330rpx;
}

.login_view{
	display: flex;
	justify-content: center;
}

.user_info{
	margin-top: 20rpx;
}

.user_picture{
	// border: solid #1e1e1e 1px;
	width: 150rpx;
	height: 150rpx;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.user_pic_img{
	width: 100%;
	height: 100%;
}

.user_name{
	font-size: 16px;
	text-align: center;
	margin-top: 25rpx;
}

.order_box{
	// border: solid #63c1ff 1px;
	position: relative;
}

.order_box_movetop{
	width: 90%;
	margin: 0 auto;
	// border: solid 1px #ff1520;
	position: relative;
	bottom: 30rpx;
	z-index: 999;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 20rpx 0px;
}

.order_state_box{
	display: flex;
	justify-content: space-around;
}

.order_state_item{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 14px;
}

.order_icon_img{
	width: 70rpx;
	height: 70rpx;
}

.order_title{
	display: flex;
	justify-content: space-between;
	// border: solid red 1px;
	width: 90%;
	margin: 0 auto;
	font-size: 14px;
	padding-bottom: 10rpx;
}

.order_title_goto{
	position: relative;
	left: 20rpx;
	display: flex;
	justify-content: center;
	align-content: center;
	// border: solid red 1px;
}

.order_rightBtn{
    width: 50rpx;
    height: 50rpx;
    position: relative;
    bottom: 10rpx;
    right: 8rpx;
}

.get_all_order{
	color: #707070;
	font-size: 13px;
}

.order_title_text{
	color: #343434;
}

.order_func{
	// border: solid #ff1111 1px;
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
	background-color: #fff;
	border-radius: 15rpx;
	padding: 40rpx 20rpx;
	font-size: 14px;
}

.func_item{
	width: 25%;
	// border: solid #40b3ff 1px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.func_item_pic_img{
	width: 55rpx;
	height: 55rpx;
}

.func_item_text{
	position: relative;
	top: 10rpx;
}

.lastFuncItem{
	margin-top: 40rpx;
}
</style>
